<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浏览器工作流 - 设置</title>
  <link rel="stylesheet" href="../styles/options.css">
</head>
<body>
  <div class="container">
    <header class="header">
      <img src="../icons/icon.png" alt="Browser Work" class="logo">
      <h1>浏览器工作流设置</h1>
      <p class="subtitle">配置您的浏览器工作流插件</p>
    </header>

    <main class="main-content">
      <section class="settings-section">
        <h2>基本设置</h2>
        
        <div class="setting-item">
          <label class="setting-label">
            <input type="checkbox" id="enable-extension" checked>
            <span class="checkmark"></span>
            启用浏览器工作流
          </label>
          <p class="setting-description">开启或关闭插件的所有功能</p>
        </div>

        <div class="setting-item">
          <label for="playback-speed">回放频率（毫秒）</label>
          <input type="number" id="playback-speed" value="500" min="10" max="5000" step="10">
          <div class="setting-item sub-setting">
            <label class="setting-label">
              <input type="checkbox" id="use-original-timings">
              <span class="checkmark"></span>
              采用操作时间
            </label>
            <p class="setting-description">勾选后将按照录制时的实际时间间隔进行回放，忽略上方设置的固定频率</p>
          </div>
          <p class="setting-description">控制回放时每个操作之间的间隔时间</p>
        </div>

        <div class="setting-item">
          <label class="setting-label">
            <input type="checkbox" id="highlight-elements" checked>
            <span class="checkmark"></span>
            高亮触发元素
          </label>
          <p class="setting-description">录制和回放时高亮显示被操作的DOM元素</p>
        </div>

        <div class="setting-item">
          <label for="highlight-color">高亮颜色</label>
          <div class="color-picker-container">
            <input type="color" id="highlight-color" value="#ff6b6b">
            <div class="color-preview" id="color-preview"></div>
            <span class="color-text" id="color-text">#ff6b6b</span>
          </div>
          <p class="setting-description">设置元素高亮时的边框和阴影颜色</p>
        </div>
      </section>

      <section class="settings-section">
        <h2>界面设置</h2>
        
        <div class="setting-item">
          <label class="setting-label">
            <input type="checkbox" id="show-logs">
            <span class="checkmark"></span>
            显示操作日志
          </label>
          <p class="setting-description">在新窗口中显示录制和回放的详细日志信息</p>
        </div>
        
        <div class="setting-item">
          <label class="setting-label">
            <input type="checkbox" id="show-floating-button">
            <span class="checkmark"></span>
            显示浮动按钮
          </label>
          <p class="setting-description">在页面上显示可拖拽的圆形录制按钮</p>
        </div>

        <div class="setting-item">
          <label class="setting-label">
            <input type="checkbox" id="debug-mode">
            <span class="checkmark"></span>
            调试模式
          </label>
          <p class="setting-description">在控制台输出详细的调试信息</p>
        </div>
      </section>

      <section class="settings-section">
        <h2>录制设置</h2>
        
        <div class="setting-item">
          <label class="setting-label">
            <input type="checkbox" id="record-scroll" checked>
            <span class="checkmark"></span>
            记录滚动事件
          </label>
          <p class="setting-description">录制时是否记录页面滚动操作</p>
        </div>

        <div class="setting-item">
          <label class="setting-label">
            <input type="checkbox" id="record-keyboard" checked>
            <span class="checkmark"></span>
            记录键盘事件
          </label>
          <p class="setting-description">录制时是否记录键盘按键操作</p>
        </div>

        <div class="setting-item">
          <label class="setting-label">
            <input type="checkbox" id="smart-selector" checked>
            <span class="checkmark"></span>
            智能选择器
          </label>
          <p class="setting-description">使用更智能的元素选择器策略提高回放成功率</p>
        </div>
      </section>

      <section class="settings-section">
        <h2>数据管理</h2>
        
        <div class="setting-item">
          <label for="max-actions">最大录制操作数</label>
          <input type="number" id="max-actions" value="1000" min="100" max="10000" step="100">
          <p class="setting-description">单次录制最多保存的操作数量</p>
        </div>
      </section>

      <section class="settings-section">
        <h2>关于</h2>
        <div class="about-info">
          <p><strong>版本:</strong> <span id="version-text">1.0.0</span></p>
          <p><strong>更新时间:</strong> <span id="update-time">--</span></p>
          <p><strong>状态:</strong> <span id="status-text" class="status-ready">就绪</span></p>
          <p><strong>已录制操作:</strong> <span id="total-actions">0</span></p>
        </div>
      </section>

      <section class="settings-section">
        <h2>使用说明</h2>
        <div class="usage-guide">
          <h3>如何使用浏览器工作流</h3>
          <ol class="usage-steps">
            <li>
              <strong>开始录制</strong>
              <p>点击插件图标打开弹窗，点击"开始录制"按钮，插件将开始记录您在当前页面的操作。</p>
            </li>
            <li>
              <strong>执行操作</strong>
              <p>在页面中正常进行点击、输入文字、滚动等操作，插件会自动记录这些动作。</p>
            </li>
            <li>
              <strong>停止录制</strong>
              <p>完成操作后，再次点击插件图标，点击"停止录制"按钮结束记录。</p>
            </li>
            <li>
              <strong>导出录制</strong>
              <p>点击"导出录制文件"将操作记录保存为JSON文件到本地。</p>
            </li>
            <li>
              <strong>回放操作</strong>
              <p>点击"导入并回放"按钮，选择之前保存的JSON文件，插件将自动重复执行录制的操作。</p>
            </li>
            <li>
              <strong>配置选项</strong>
              <p>在此设置页面可以调整回放速度、显示选项、录制范围等参数。</p>
            </li>
          </ol>
          
          <h3>注意事项</h3>
          <ul class="usage-notes">
            <li>请在普通网页中使用，不支持浏览器内置页面（如chrome://）</li>
            <li>录制的操作依赖于页面结构，如果页面发生重大改动可能影响回放效果</li>
            <li>建议在回放前备份重要数据，确保操作安全</li>
            <li>如果回放失败，可以尝试调整回放频率或检查页面是否有变化</li>
            <li>"采用操作时间"功能默认启用，回放将按照录制时的真实时间间隔执行，提供更自然的操作节奏</li>
          </ul>
        </div>
      </section>

      <div class="actions">
        <button id="save-btn" class="primary-btn">保存设置</button>
        <button id="reset-btn" class="secondary-btn">重置默认</button>
      </div>

      <div class="message" id="message-box" style="display: none;"></div>
    </main>
  </div>

  <script src="options.js"></script>
</body>
</html> 